<template>
  <div>
    <div class="header">产品管理</div>
    <div class="inputBox">
      产品名称：<el-input
        v-model="params.name"
        placeholder="请输入"
        style="width: 200px; margin-right: 20px"
      />
      产品分类：
      <el-select
        v-model="params.spec"
        placeholder="请选择"
        style="width: 200px; margin-right: 20px"
      >
        <el-option label="反击破产品" value="反击破产品" />
        <el-option label="鄂破产品" value="鄂破产品" />
        <el-option label="圆锥类产品" value="圆锥类产品" />
      </el-select>
      <el-button type="primary">查询</el-button>
      <el-button type="info">重置</el-button>
    </div>
    <div class="main">
      <div
        v-for="item in productList"
        :key="item.id"
        class="box"
        style="position: relative"
        @click="toDetail(item.id)"
      >
        <el-image :src="item.picurl" style="width: 180px; height: 170px" />
        <p>{{ item.name }}</p>
        <span class="price">${{ item.price }}</span>
      </div>
    </div>
    <div style="float: right; margin-right: 150px">
      <el-pagination
        v-model="params.pageSize"
        :default-page-size="8"
        :page-sizes="[8, 10, 20, 30]"
        background
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, onBeforeMount } from "vue";
import { getProductList } from "@/api/product/product.js";
import { useRouter } from "vue-router";
//获取路由实例
const router = useRouter();
//定义产品列表
const productList = ref([]);
//定义路径
const path = "http://localhost:8080";
//定义参数对象
const params = ref({
  name: "",
  spec: "",
  status: 1,
  page: 1,
  pageSize: 8
});
const total = ref(0);
//获取列表
async function init() {
  let res = await getProductList(params.value);
  if (res.code == 200) {
    productList.value = res.data.list;
    productList.value.forEach(item => {
      item.picurl = path + item.picurl;
    });
    params.value.page = res.data.page;
    params.value.pageSize = res.data.pageSize;
    total.value = res.data.total;
  }
}
//分页触发的函数
//分页大小改变触发
function handleSizeChange(ps) {
  params.value.pageSize = ps;
  init();
}
//页数改变触发
function handleCurrentChange(pg) {
  params.value.page = pg;
  init();
}
//携带id跳转页面
function toDetail(id) {
  //路由携带id跳转页面
  router.push({ path: "/customer/productDetail", query: { id } });
  console.log(id, ">>>>>>>>>>>>>>");
}
onBeforeMount(() => {
  init();
});
</script>
<style scoped>
.header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #eee;
  border-bottom: 1px solid #ccc;
  padding-left: 20px;
}
.inputBox {
  margin: 20px 0 0 50px;
}
.main {
  margin: 10px 20px 20px 20px;
  width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.main .box {
  width: 180px;
  height: 240px;
  border: 1px solid #aaa;
  margin: 10px 30px;
}
.main .box p {
  margin-left: 5px;
}
.price {
  position: absolute;
  bottom: 5px;
  left: 5px;
}
</style>
